<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <title>Document</title>
    <style>
         #nav{
            background-color:beige;
            width:100%;
            height: 80px;
            position: fixed;
            top:0;
            left: 0;
            font-family: 楷体;
         



        }
        #inner-nav{
            width:70%;
            margin: 0 auto;
            text-align: right;
            height: 80px;
            line-height: 80px;
            z-index: 2;

        }
        #inner-nav a{
            margin: 0 30px;
            text-decoration: none;
            color:lightblue;
            font-size: 30px;

        }
        #header{
         
            
                margin: 0px;
                height: 500px;
                background-image: url("bg.jpg");
                background-position: 50% 50%;
                z-index: 0;
               

          
               
               
        }
        body{
            height: 3000px;
            margin: 0;
            z-index: 1;
        }
        #main{
             width:70%;
            margin: 0px auto 0 auto;
            height: 2800px;
            background-color: lightblue;
            border: 1px solid black;
            z-index: 0;

        }
        #first{
            position:absolute;
            top: 600px;
            left:1200px;
            border-radius:50%;
            /*z-index: -1;*/
           
        }
        #second{
            position: absolute;
            top:850px;
            left:850px;
             border-radius:50%;
        }
        #man{
                width:60%;
                margin: 0 auto;
                text-indent: 2em;

            }
        #im{
                width:500px;
                margin: 0 auto;
                }
       
        #information{
               
                width: 400px;

                height:220px;
                /*border: 1px solid red;*/
                position: relative;
                top: 130px;
                left: 900px;
                font-family: 楷体;
                font-size: 20px;
            }
        #aboutme{
                width: 800px;
                margin: -100px 150px 80px 200px;
        }
        #me{
                margin: 0 auto;
                border-radius: 50%;

                width: 180px;
                height: 180px;
                position: relative;
                top:-20px;
                left: 0;
                
            
            }
        #welcome{
           
                /*position: relative;
                top:50px;*/
                text-align: center;
                color: lightcoral;
                font-size: 30px;
                font-family: 楷体;
                
          
        }
        h2{
            font-family: 楷体;
            text-align: center;
          
         }
        #img1{
            border-radius: 50%;
            height: 200px;
            width: 200px;
            position: relative;
            top:50px;
            left:50px;

        }
        .txt{
            font-size: 20px;
            font-family: 楷体;
        }
        #img2{
            border-radius: 50%;
            height: 200px;
            width: 200px;
            position: relative;
            top:240px;
            left:450px;
        }
       
     

    </style>
</head>
<body>
    <div id="nav">
        <div id="inner-nav">
            <a class="textstyle" href="#myself">个人简介</a>
            <a class="textstyle" href="#class">我的班级</a>
            <a class="textstyle" href="#classmate">我的同学</a>
            <a class="textstyle" href="#school">我的学校</a>
            <a class="textstyle" href="#dream">我的理想</a>
        </div>
    </div>

        

        

    <div id="header">
      
      
    </div>
    
    <div id="main">
        <p id="welcome">欢迎来到我的主页</p>
        <div>
            <h2 id="myself">个人简介</h2>
            <div id="information">
                <div>
                    <ul type="none">
                        <li>姓名：蔡鑫</li>
                        <li>籍贯：商丘</li>
                        <li>现居地：郑州</li>
                        <li>爱好：健身</li>
                        <li>身高：166cm</li>
                        <li>理想:一直健身</li>
                      
                            
                    </ul>
                </div>
            </div>
            <div id="aboutme">
            <img id="me" src="5.jpg">
            </div>
        </div>

      
        <hr>

        <div>
            <h2 id="school">我的学校</h2>
            <div id="man">
                <p class="txt"> 郑州大学西亚斯国际学院是由美国西亚斯集团公司投资，与郑州大学合作，
                美国堪萨斯州富特海斯州立大学（Fort Hays State University，英文缩写FHSU)协办的中外合作办学机构，
                是河南省首家被国务院学位委员会批准可以实施境外学士学位教育合作项目的全日制本科院校，也是首批被中国
                教育部中外合作办学评估合格的高校。</p>
                <img id="im" src="2.jpg">
            </div>
            <div id="man">
           
               <p class="txt"> 学校位于中国人文始祖黄帝故里河南郑州新郑市，占地面积2200余亩，已建有90余万平方米的风格各异的教学馆舍。
                欧式现代园林与中国古典园林相结合的校园环境，欧式风格和中国风格相结合的教学楼群，完备的体育、音乐、美术教学场馆设施，
                既体现了西亚斯中西合璧的办学理念，也彰显了国际化育人环境的时空意识和德、智、体、音、美全面发展的育人思想。置身校园，
                如穿越于东西方建筑与园林文化的倾情对话之中，中西、古今于一瞬间凝固为立体音乐。青山宁静益智，绿水幽雅润心，给学生创造了浓郁的国际化成长氛围。</p>
                <img id="im" src="3.jpg">
            </div>
            <div id="man">
          
            <p class="txt"> 学校贯彻执行中国共产党和国家的教育方针，秉持中西合璧办学理念，实施国际化全人教育，培养复合型实用人才。为达此目标，
                学校在积极构建优良学习环境的同时，在办好基础学科，夯实基础课程学习的基础上，提供多元文化的学习渠道，通过对全新认知科学的学习，
                优化学习方式；通过人脑加电脑智能学习方法的培养，提升学习能力；通过创新教育和实践，提高学生的实践能力与创新意识；通过创建独特
                而又丰富多彩的校园文化，拓展学生视野，促进学生综合素质的提高，培养自主学习的良好学风；通过外籍教师全英语授课和英语原版教材的使用，
                强化对学生汉语、英语双语能力和资讯能力的培养，使其初步具备国际化的沟通交流能力、国际化的视野和国际化的思维方式，成为一个适应国际一体化经济社会发展的合格人才。</p>
            <img id="im" src="4.jpg">
            </div>








        </div>

        <hr>
        
        <div>
            <h2 id="classmate">我的同学</h2>
            <img id="img1" src="5.jpg" alt="">
            <img id="img2" src="5.jpg" alt="">



        </div>
    


    </div>
    
</body>
</html>